<template>
  <input
    type="text"
    :value="name"
    @input="emit('update:name', ($event.target as HTMLInputElement).value)"
  />
  <input
    type="password"
    :value="psd"
    @input="emit('update:psd', (<HTMLInputElement>$event.target).value)"
  />
</template>

<script setup lang="ts" name="AtguiguInput">
// 获取父组件使用v-model传递的数据和自定义事件
defineProps(["name", "psd"]); // 获取父组件传递的数据
const emit = defineEmits(["update:name", "update:psd"]); // 获取自定义事件,实现向父组件传递数据
</script>

<style scoped>
input {
  border: 2px solid black;
  background-image: linear-gradient(45deg, red, yellow, green);
  height: 30px;
  color: white;
  font-size: 20px;
}
</style>
